<template>
  <div v-popover:portal class="portal">
    <slot :portal="portalName">
      <span class="portal-title" :style="{ color: theme }">
        {{ portalName }}
      </span>
      <i
        v-if="portals.length > 1 && multiPortal"
        class="fks-icon-arrow-down"
        :class="visible ? 'rotate180' : ''"
        :style="{ color: theme }"
      />
    </slot>
    <fks-popover
      v-if="portals.length > 1 && multiPortal"
      ref="portal"
      v-model="visible"
      trigger="click"
      placement="bottom"
      :visible-arrow="false"
      popper-class="toolbar-popover"
    >
      <div class="portal-select">
        <ul class="portal-select-options">
          <li
            v-for="type in portalList"
            :key="type.code"
            @click="handleCommand(type)"
          >
            <span>{{ type[$lang] }}</span>
          </li>
        </ul>
      </div>
    </fks-popover>
    <fks-dialog
      :visible.sync="dialogVisible"
      width="400px"
      :title="`${data[$lang]}选择`"
    >
      <fks-card
        v-for="portal in data.list"
        :key="portal.id"
        shadow="hover"
        class="portal-list-item"
        @click.native="changePortal(portal)"
      >
        {{ portal.name }}
      </fks-card>
    </fks-dialog>
  </div>
</template>
<script>
import {
  CHANGE_PORTAL,
  UPDATE_USER,
  GET_BUTTONS
} from '@/store/Action/actionTypes'
import { ENUM, PORTALS, PORTAL } from '@/store/State/stateTypes'
import * as types from '@/store/Getter/getterTypes.js'
export default {
  data() {
    return {
      visible: false,
      dialogVisible: false,
      data: {},
      value: '',
      status: '',
      isActive: true
    }
  },
  computed: {
    theme() {
      return this.$store.getters[types.THEME]
    },
    portalName() {
      return this.portalList.find(
        (item) => item.code === this.$store.state[PORTAL].type + ''
      )?.[this.$lang]
    },
    portals() {
      return this.$store.state[PORTALS]
    },
    portalTypes() {
      return this.$store.state[ENUM].portalType || []
    },
    multiPortal() {
      return this.$store.getters[types.MULTI_PORTAL]
    },
    portalList() {
      let portalList = []

      this.portalTypes.forEach((e) => {
        let arr = this.portals.filter((p) => {
          return p.type == e.code
        })
        if (arr && arr.length) {
          let portal = Object.assign({ list: arr }, e)
          portalList.push(portal)
        }
      })
      return portalList
    }
  },
  methods: {
    handleCommand(type) {
      if (type.list.length > 1) {
        this.data = type
        this.dialogVisible = true
      } else {
        this.changePortal(type.list[0])
      }
    },
    async changePortal(portal) {
      this.$store.dispatch(CHANGE_PORTAL, portal)
      this.$store.dispatch(UPDATE_USER, portal.id)
      // await this.$store.dispatch(GET_BUTTONS)
      this.$router.replace('/distribute')
      this.$refs.portal && this.$refs.portal.doClose()
      this.dialogVisible = false
    }
  }
}
</script>

<style lang="scss" scoped>
.rotate180 {
  transform: rotate(180deg);
}

.portal-select {
  &-title {
    padding: 0 0 8px;
    border-bottom: 1px solid #f2f3f4;
    font-weight: bold;
    text-align: center;
    color: #393e45;
  }

  &-options {
    padding: 8px 0 0;

    li {
      padding: 4px 0;
      font-size: 0;
      text-align: center;
      cursor: pointer;

      &:hover {
        background-color: #f7f8f8;
      }
    }

    li + li {
      margin-top: 4px;
    }

    span {
      font-size: 14px;
      vertical-align: middle;
      color: #999;
    }
  }
}

.portal {
  display: inline-block;
  text-align: center;
  vertical-align: middle;
  color: black;

  &:hover {
    cursor: pointer;
  }

  &-title {
    font-size: 15px;
  }
}

::v-deep .fks-icon-arrow-down {
  margin-left: 8px;
  line-height: 56px;
  vertical-align: middle;
  transition: transform 0.3s;
}

.portal-list-item {
  cursor: pointer;
}

.portal-list-item + .portal-list-item {
  margin-top: 8px;
}
</style>
